<template>
  <div class="make-booking-page">
    <h2 class="page-title">预订会议室</h2>

    <section class="booking-form-section" aria-labelledby="booking-form-title">
      <h3 id="booking-form-title" class="section-title">填写预约要求</h3>
      <form @submit.prevent="handleSearchRooms" class="booking-form">
        <div class="form-row">
          <div class="form-group">
            <label for="booking-date">选择日期:</label>
            <input type="date" id="booking-date" v-model="searchCriteria.date" required :min="minDate" :max="maxDate" />
          </div>

          <div class="form-group">
            <label for="capacity">参会人数:</label>
            <input type="number" id="capacity" v-model.number="searchCriteria.capacity" min="1" placeholder="例如: 5" required />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group time-selection-group">
            <label>选择时间:</label>
            <div class="time-inputs">
              <div class="time-group">
                <label for="start-time" class="sr-only">开始时间</label>
                <select id="start-time" v-model="searchCriteria.startTime" required>
                  <option disabled value="">开始时间</option>
                  <option v-for="hour in availableHours" :key="`start-${hour}`" :value="`${hour}:00:00`">
                    {{ hour }}:00
                  </option>
                </select>
              </div>
              <span class="time-separator">-</span>
              <div class="time-group">
                <label for="end-time" class="sr-only">结束时间</label>
                <select id="end-time" v-model="searchCriteria.endTime" required>
                  <option disabled value="">结束时间</option>
                  <option v-for="hour in availableHours" :key="`end-${hour}`" :value="`${hour}:00:00`">
                    {{ hour }}:00
                  </option>
                </select>
              </div>
            </div>
            <p v-if="timeError" class="error-message">{{ timeError }}</p>
          </div>
        </div>

        <div class="form-group equipment-checkboxes">
          <label class="equipment-group-label">所需设备 (可选):</label>
          <div class="checkbox-group-wrapper">
            <div class="custom-checkbox">
              <input type="checkbox" id="projector" value="projector" v-model="searchCriteria.equipment" />
              <label for="projector">
                <span class="icon projector-icon"></span>投影仪
              </label>
            </div>
            <div class="custom-checkbox">
              <input type="checkbox" id="sound" value="sound" v-model="searchCriteria.equipment" />
              <label for="sound">
                <span class="icon sound-icon"></span>音响系统
              </label>
            </div>
            <div class="custom-checkbox">
              <input type="checkbox" id="internet" value="internet" v-model="searchCriteria.equipment" />
              <label for="internet">
                <span class="icon internet-icon"></span>网络
              </label>
            </div>
          </div>
        </div>

        <button type="submit" class="search-button" :disabled="isLoadingRooms">
          <span v-if="isLoadingRooms">
            <span class="spinner"></span> 正在搜索...
          </span>
          <span v-else>搜索会议室</span>
        </button>
      </form>
    </section>

    <div v-if="isLoadingRooms && !searched" class="loading-results-indicator" aria-live="assertive">
      <div class="spinner-large"></div>
      <p>正在查找合适的会议室...</p>
    </div>

    <section v-if="!isLoadingRooms && searched && searchResults.length > 0" class="search-results-section" aria-live="polite">
      <h3 class="section-title">符合条件的会议室</h3>
      <div class="filter-controls">
        <label for="resultRoomTypeFilter">筛选会议室类型:</label>
        <select id="resultRoomTypeFilter" v-model="selectedResultRoomType">
          <option value="all">所有类型</option>
          <option value="1">教室</option>
          <option value="2">圆桌</option>
          <option value="3">董事会</option>
          <option value="4">多媒体</option>
        </select>
      </div>

      <div v-if="filteredSearchResults.length === 0" class="no-results info-box">
        <p>没有找到符合当前筛选条件的会议室。请尝试更改筛选选项。</p>
      </div>

      <TransitionGroup name="room-list-fade" tag="ul" class="room-results-list">
        <li v-for="room in filteredSearchResults" :key="room.roomId"
            class="room-result-item"
            :class="{ 'selected': selectedRoom && selectedRoom.roomId === room.roomId }"
            tabindex="0"
            @keydown.enter="selectRoom(room)"
            @keydown.space="selectRoom(room)">
          <div class="room-header">
            <h4 class="room-name">{{ room.roomname }}</h4>
            <span class="room-type-badge">{{ getRoomType(room.roomType) }}</span>
          </div>
          <div class="room-details">
            <p class="detail-item capacity">
              <span class="detail-icon capacity-icon"></span>
              <strong>容纳人数:</strong> {{ room.capacity }}人
            </p>
            <div class="detail-item equipment-details">
              <strong><span class="detail-icon equipment-icon"></span>设备:</strong>
              <ul class="equipment-list">
                <li :class="{ 'available': room.projector === 1, 'unavailable': room.projector === 0 }">
                  投影仪 {{ room.projector === 1 ? '✔' : '✘' }}
                </li>
                <li :class="{ 'available': room.sound === 1, 'unavailable': room.sound === 0 }">
                  音响 {{ room.sound === 1 ? '✔' : '✘' }}
                </li>
                <li :class="{ 'available': room.internet === 1, 'unavailable': room.internet === 0 }">
                  网络 {{ room.internet === 1 ? '✔' : '✘' }}
                </li>
              </ul>
            </div>
            <p class="detail-item price">
              <span class="detail-icon price-icon"></span>
              <strong>价格:</strong> <span class="price-value">¥{{ room.price }}</span> /小时
            </p>
          </div>
          <div class="room-actions">
            <button @click.stop="handleViewComments(room.roomId)" class="button view-comments-button">
              <span class="button-icon comment-icon"></span>查看评价
            </button>
            <button @click="selectRoom(room)" class="button select-button" :disabled="isSelectingRoom === room.roomId || (selectedRoom && selectedRoom.roomId === room.roomId)">
              <span v-if="isSelectingRoom === room.roomId">
                <span class="spinner-small"></span>处理中...
              </span>
              <span v-else-if="selectedRoom && selectedRoom.roomId === room.roomId">已选择</span>
              <span v-else>选择此会议室</span>
            </button>
          </div>
        </li>
      </TransitionGroup>
    </section>

    <section v-if="!isLoadingRooms && searched && searchResults.length === 0 && filteredSearchResults.length === 0" class="no-results-section info-box">
      <h3 class="section-title">没有找到会议室</h3>
      <p>抱歉，根据您的搜索条件，目前没有可用的会议室。</p>
      <p>您可以尝试调整日期、时间或参会人数等条件后重新搜索。</p>
    </section>

    <MessageModal
      :is-visible="showMessageModal"
      :title="messageModalTitle"
      :message="messageModalContent"
      :type="messageModalType"
      @close="handleMessageModalClose"
    />

    <CommentsDisplayModal
      :is-visible="showCommentsDisplayModal"
      :comments="commentsToDisplay"
      @close="handleCloseCommentsModal"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { searchRooms } from '@/apis/room';
import { createReservationOrder } from '@/apis/orders';
import { getCommentsByRoomId } from '@/apis/comment';
import { useUserStore } from '@/stores/user';
import { useBookingTempStore } from '@/stores/bookingTemp';
import CommentsDisplayModal from '@/components/common/CommentsDisplayModal.vue';
import MessageModal from '@/components/global/MessageModal.vue';

const router = useRouter();
const userStore = useUserStore();
const bookingTempStore = useBookingTempStore();

// --- New Refs for UI States ---
const isLoadingRooms = ref(false); // For overall search loading
const isSelectingRoom = ref(null); // For individual room selection loading, stores roomId
const timeError = ref(null); // For inline time validation error

// Message Modal for errors/info
const showMessageModal = ref(false);
const messageModalTitle = ref('');
const messageModalContent = ref('');
const messageModalType = ref('info');

const handleMessageModalClose = () => {
  showMessageModal.value = false;
  messageModalTitle.value = '';
  messageModalContent.value = '';
  messageModalType.value = 'info';
};

const searchCriteria = ref({
  date: '',
  startTime: '08:00:00',
  endTime: '21:00:00',
  capacity: 1,
  equipment: [],
});

const searchResults = ref([]);
const searched = ref(false);
const selectedRoom = ref(null);
const selectedResultRoomType = ref('all');

const filteredSearchResults = computed(() => {
  if (selectedResultRoomType.value === 'all') {
    return searchResults.value;
  }
  return searchResults.value.filter(room => room.roomType === parseInt(selectedResultRoomType.value));
});
const currentBooking = ref(null);

const userId = computed(() => userStore.user?.id);

const availableHours = computed(() => {
  const hours = [];
  const today = new Date();
  const selectedDate = new Date(searchCriteria.value.date);
  const isToday = selectedDate.toDateString() === today.toDateString();
  const currentHour = today.getHours();

  let startHour = 8;
  if (isToday) {
    startHour = Math.max(8, currentHour); // Start from current hour if today, but not before 8 AM
  }

  for (let i = startHour; i <= 21; i++) {
    hours.push(String(i).padStart(2, '0'));
  }
  return hours;
});

const minDate = computed(() => {
  const today = new Date();
  return today.toISOString().split('T')[0];
});

const maxDate = computed(() => {
  const futureDate = new Date();
  futureDate.setDate(futureDate.getDate() + 60);
  return futureDate.toISOString().split('T')[0];
});

const getRoomType = (type) => {
  switch (type) {
    case 1: return '教室';
    case 2: return '圆桌';
    case 3: return '董事会';
    case 4: return '多媒体';
    default: return '未知类型';
  }
};

const calculatedTotalFee = computed(() => {
  if (!selectedRoom.value || !searchCriteria.value.startTime || !searchCriteria.value.endTime) {
    return 0;
  }
  const startHour = parseInt(searchCriteria.value.startTime.substring(0, 2));
  const endHour = parseInt(searchCriteria.value.endTime.substring(0, 2));
  const duration = endHour - startHour;
  if (duration <= 0) return 0;
  return selectedRoom.value.price * duration;
});

const handleSearchRooms = async () => {
  timeError.value = null; // Clear previous time error
  selectedRoom.value = null;
  currentBooking.value = null;
  isLoadingRooms.value = true;
  searched.value = false; // Reset searched state until results are processed

  const today = new Date();
  const selectedDate = new Date(searchCriteria.value.date);
  const isToday = selectedDate.toDateString() === today.toDateString();
  const currentHour = today.getHours();
  const selectedStartHour = parseInt(searchCriteria.value.startTime.substring(0, 2));

  if (searchCriteria.value.startTime >= searchCriteria.value.endTime) {
    timeError.value = '结束时间必须晚于开始时间。';
    isLoadingRooms.value = false;
    return;
  }

  if (isToday && selectedStartHour < currentHour) {
    timeError.value = '选择的开始时间不能早于当前时间。';
    isLoadingRooms.value = false;
    return;
  }

  try {
    const criteria = {
      capacity: searchCriteria.value.capacity,
      projector: searchCriteria.value.equipment.includes('projector') ? 1 : 0,
      sound: searchCriteria.value.equipment.includes('sound') ? 1 : 0,
      internet: searchCriteria.value.equipment.includes('internet') ? 1 : 0,
      startTime: `${searchCriteria.value.date}T${searchCriteria.value.startTime}`,
      endTime: `${searchCriteria.value.date}T${searchCriteria.value.endTime}`,
    };

    const response = await searchRooms(criteria);
    if (response.code === 200 && response.data) {
      searchResults.value = response.data;
    } else {
      console.error('Failed to search rooms:', response.msg);
      searchResults.value = [];
      messageModalTitle.value = '搜索失败';
      messageModalContent.value = response.msg || '未能找到会议室，请稍后再试。';
      messageModalType.value = 'error';
      showMessageModal.value = true;
    }
  } catch (error) {
    console.error('Failed to search rooms:', error);
    searchResults.value = [];
    messageModalTitle.value = '搜索异常';
    messageModalContent.value = '搜索会议室时发生错误，请检查网络或稍后再试。';
    messageModalType.value = 'error';
    showMessageModal.value = true;
  } finally {
    isLoadingRooms.value = false;
    searched.value = true; // Mark search as completed
  }
};

const selectRoom = async (room) => {
  if (!userId.value) {
    messageModalTitle.value = '用户未登录';
    messageModalContent.value = '请先登录后再进行预订操作。';
    messageModalType.value = 'error';
    showMessageModal.value = true;
    // Optionally redirect to login: router.push('/login');
    return;
  }
  isSelectingRoom.value = room.roomId;
  try {
    const orderData = {
      userId: String(userId.value),
      roomId: String(room.roomId),
      startTime: `${searchCriteria.value.date}T${searchCriteria.value.startTime}`,
      endTime: `${searchCriteria.value.date}T${searchCriteria.value.endTime}`,
    };
    const response = await createReservationOrder(orderData);

    if (response.code === 200 && response.data) {
      const bookingDetails = response.data;
      currentBooking.value = bookingDetails;
      bookingTempStore.setTempBookingDetails(bookingDetails);
      selectedRoom.value = room; // Keep the room selected visually for a moment before navigation
      router.push({ name: 'BookingDetails', params: { id: bookingDetails.orderId } });
    } else {
      console.error('Failed to create booking:', response.msg);
      messageModalTitle.value = '订单创建失败';
      messageModalContent.value = response.msg || '无法创建预订订单，请重试。';
      messageModalType.value = 'error';
      showMessageModal.value = true;
      // selectedRoom.value = null; // No need to reset selectedRoom here as we didn't navigate
    }
  } catch (error) {
    console.error('Failed to create booking:', error);
    messageModalTitle.value = '订单创建异常';
    messageModalContent.value = '创建预订订单时发生错误，请稍后再试。';
    messageModalType.value = 'error';
    showMessageModal.value = true;
    // selectedRoom.value = null;
  } finally {
    isSelectingRoom.value = null;
  }
};

const showCommentsDisplayModal = ref(false);
const commentsToDisplay = ref([]);

const handleViewComments = async (roomId) => {
  try {
    const response = await getCommentsByRoomId(roomId);
    if (response.code === 200) {
      if (typeof response.data === 'string' && response.data.includes('暂无评论')) {
        commentsToDisplay.value = [];
      } else if (Array.isArray(response.data)) {
        commentsToDisplay.value = response.data;
      } else {
        console.warn('Unexpected data format for comments:', response.data);
        commentsToDisplay.value = [];
      }
      showCommentsDisplayModal.value = true;
    } else {
      messageModalTitle.value = '获取评论失败';
      messageModalContent.value = response.msg || '未能获取评论信息。';
      messageModalType.value = 'error';
      showMessageModal.value = true;
      commentsToDisplay.value = [];
    }
  } catch (error) {
    console.error('Error fetching comments:', error);
    messageModalTitle.value = '获取评论失败';
    messageModalContent.value = '加载评论时发生错误，请稍后再试。';
    messageModalType.value = 'error';
    showMessageModal.value = true;
    commentsToDisplay.value = [];
  }
};

const handleCloseCommentsModal = () => {
  showCommentsDisplayModal.value = false;
  commentsToDisplay.value = [];
};

onMounted(() => {
  searchCriteria.value.date = minDate.value;
  const now = new Date();
  const currentHour = now.getHours();

  let defaultStartHour = Math.max(8, currentHour); // Start from current hour if today, but not before 8 AM
  if (defaultStartHour > 20) { // If current hour is 21 or later, default to 20 (8 PM) for a 1-hour slot
    defaultStartHour = 20;
  }
  
  let defaultEndHour = defaultStartHour + 1;
  if (defaultEndHour > 21) { // Ensure end hour does not exceed 21 (9 PM)
    defaultEndHour = 21;
  }

  searchCriteria.value.startTime = `${String(defaultStartHour).padStart(2, '0')}:00:00`;
  searchCriteria.value.endTime = `${String(defaultEndHour).padStart(2, '0')}:00:00`;
});
</script>

<style scoped>
/* General Page Styles */
.make-booking-page {
  padding: 1.5rem;
  max-width: 1100px;
  margin: 2rem auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: #f4f7f9; /* Lighter page background */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 30, 80, 0.08);
}

.page-title {
  color: #2c3e50; /* Darker, more professional blue */
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: 2.25rem;
  font-weight: 600;
}

/* Section Styling */
.section-title {
  color: #34495e; /* Slightly muted blue for section titles */
  margin-top: 0;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #e0e6ed;
  padding-bottom: 0.75rem;
  font-size: 1.6rem;
  font-weight: 500;
}

.booking-form-section,
.search-results-section,
.no-results-section {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Form Styling */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr; /* Default to single column */
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .form-row {
    grid-template-columns: 1fr 1fr; /* Two columns on wider screens */
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label, .equipment-group-label {
  font-weight: 500;
  color: #4a5568; /* Slightly desaturated text color */
  font-size: 0.95rem;
}
.sr-only { /* Screen-reader only */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}


.form-group input[type="date"],
.form-group input[type="number"],
.form-group select {
  padding: 0.8rem 1rem;
  border: 1px solid #cbd5e0; /* Softer border */
  border-radius: 6px;
  font-size: 1rem;
  background-color: #fdfdfe;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input[type="date"]:focus,
.form-group input[type="number"]:focus,
.form-group select:focus {
  outline: none;
  border-color: #3b82f6; /* Tailwind blue 500 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.form-group input::placeholder {
  color: #a0aec0;
}

.time-selection-group .time-inputs {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.time-selection-group .time-inputs .time-group {
  flex: 1;
}
.time-selection-group .time-inputs .time-separator {
  color: #718096;
  font-weight: 500;
}


.equipment-checkboxes .checkbox-group-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.25rem;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  background-color: #f8fafc;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.custom-checkbox:hover {
  border-color: #a0aec0;
}
.custom-checkbox input[type="checkbox"] {
  margin-right: 0.6rem;
  width: 18px;
  height: 18px;
  accent-color: #3b82f6; /* Modern way to color checkboxes */
  cursor: pointer;
}
.custom-checkbox input[type="checkbox"]:focus-visible + label {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 2px;
}

.custom-checkbox label {
  font-weight: normal;
  color: #4a5568;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
.custom-checkbox .icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  /* Add SVG icons here via background-image or mask-image */
}


.search-button {
  padding: 0.9rem 2rem;
  background-color: #3b82f6; /* Tailwind blue 500 */
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 500;
  transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem; /* Add some space above the button */
}
.search-button:hover:not(:disabled) {
  background-color: #2563eb; /* Tailwind blue 600 */
}
.search-button:active:not(:disabled) {
  transform: translateY(1px);
}
.search-button:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.7;
}
.spinner, .spinner-small {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.8s ease-in-out infinite;
}
.spinner-small {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading-results-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #4a5568;
    background-color: #ffffff; /* Match section background */
    border-radius: 10px; /* Match section border-radius */
    margin-bottom: 2.5rem; /* Match section margin */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); /* Match section shadow */
}
.spinner-large {
    width: 48px;
    height: 48px;
    border: 5px solid #e2e8f0; /* Light gray for track */
    border-top-color: #3b82f6; /* Blue for spinner */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}


/* Search Results Styling */
.filter-controls {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.filter-controls label {
  font-weight: 500;
  color: #4a5568;
}
.filter-controls select {
  padding: 0.6rem 1rem;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  background-color: #fff;
  min-width: 180px;
}
.filter-controls select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.info-box { /* For no-results messages */
  text-align: center;
  color: #4a5568;
  padding: 2rem 1.5rem;
  background-color: #f8fafc; /* Very light gray */
  border-radius: 8px;
  border: 1px dashed #e2e8f0;
  margin-top: 1rem;
}
.info-box p {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}


.room-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.room-result-item {
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.room-result-item:hover, .room-result-item:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.room-result-item.selected {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 6px 16px rgba(0,0,0,0.08);
}

.room-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}
.room-name {
  color: #2c5282; /* Darker blue for room name */
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}
.room-type-badge {
  background-color: #e0e7ff; /* Light indigo */
  color: #3730a3; /* Indigo */
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.room-details {
  margin-bottom: 1rem;
  flex-grow: 1;
  font-size: 0.9rem;
  color: #4a5568;
}
.detail-item {
  margin-bottom: 0.6rem;
  display: flex;
  align-items: flex-start; /* Align icon with first line of text */
  gap: 0.5rem;
}
.detail-item strong {
  color: #2d3748; /* Slightly darker for labels */
  font-weight: 500;
  min-width: 70px; /* Ensure some alignment */
}
.detail-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: 2px; /* Align with text */
  /* SVG icons here */
}

.equipment-details strong {
  display: block; /* Make "设备:" take its own line initially */
  margin-bottom: 0.3rem;
}
.equipment-list {
  list-style: none;
  padding-left: 0; /* Changed from 1rem */
  margin: 0;
  font-size: 0.85rem;
}
.equipment-list li {
  margin-bottom: 0.25rem;
  padding-left: 0.5rem;
}
.equipment-list li.available {
  color: #38a169; /* Green for available */
}
.equipment-list li.unavailable {
  color: #e53e3e; /* Red for unavailable */
  text-decoration: line-through;
}

.price {
  text-align: right;
  margin-bottom: 1.25rem; /* Increased margin before actions */
}
.price .price-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3b82f6;
}

.room-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: auto; /* Push actions to the bottom */
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid #f0f3f6;
}

.button { /* Common button styles for cards */
  padding: 0.7rem 1.2rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.button:active:not(:disabled) {
  transform: translateY(1px);
}
.button-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
}

.view-comments-button {
  background-color: #64748b; /* Tailwind slate 500 */
  color: #fff;
}
.view-comments-button:hover {
  background-color: #475569; /* Tailwind slate 600 */
}

.select-button {
  background-color: #10b981; /* Tailwind emerald 500 */
  color: #fff;
}
.select-button:hover:not(:disabled) {
  background-color: #059669; /* Tailwind emerald 600 */
}
.select-button:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.7;
}


/* Error message styling (visual slot from template) */
.error-message {
  color: #c53030; /* Red 700 */
  font-size: 0.875rem;
  margin-top: 0.5rem;
  /* grid-column: 1 / -1; */ /* Ensure it spans if its parent is a grid if it's directly inside a grid with multiple columns */
}


/* Transitions */
.room-list-fade-enter-active,
.room-list-fade-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother cubic-bezier */
}
.room-list-fade-enter-from,
.room-list-fade-leave-to {
  opacity: 0;
  transform: translateY(25px) scale(0.98);
}
.room-list-fade-move { /* For smooth reordering if items change position */
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hidden booking-confirmation-section styles as they are not in current template but were in original CSS */
.booking-confirmation-section, .confirmation-details, .countdown, .payment-actions button {
  /* display: none; */ /* Or remove if not needed at all for this component */
}
</style>
